import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
import _regeneratorRuntime from "@babel/runtime/regenerator";
import _asyncToGenerator from "@babel/runtime/helpers/esm/asyncToGenerator";
import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
import _createClass from "@babel/runtime/helpers/esm/createClass";
import _inherits from "@babel/runtime/helpers/esm/inherits";
import _createSuper from "@babel/runtime/helpers/esm/createSuper";
import _applyDecoratedDescriptor from "@babel/runtime/helpers/esm/applyDecoratedDescriptor";

var _dec, _class;

import React from 'react';
import { Bind } from 'lodash-decorators';
import classNames from 'classnames';
import { Input, Popover, Pagination, Button, Icon } from 'antd';
import { getEnvConfig } from "../../utils/iocUtils";
import Icons from "../Icons";
import iconfont from "../Icons/iconfont.css?modules";
import { CPAAS_ORIGIN_ICON_NAME } from "../Icons/Status";
import styles from "./index.less?modules";
var IconsPicker = (_dec = Bind(), (_class = /*#__PURE__*/function (_React$Component) {
  _inherits(IconsPicker, _React$Component);

  var _super = _createSuper(IconsPicker);

  function IconsPicker(props) {
    var _this;

    _classCallCheck(this, IconsPicker);

    _this = _super.call(this, props);
    _this.state = {
      selectedIcon: props.value,
      pickerVisible: false,
      icons: [],
      totalIcons: [],
      defaultPageSize: 30
    };
    _this.config = getEnvConfig();
    return _this;
  }

  _createClass(IconsPicker, [{
    key: "componentDidMount",
    value: function componentDidMount() {
      this.loadAllIconsAsync();
    }
  }, {
    key: "loadAllIconsAsync",
    value: function () {
      var _loadAllIconsAsync = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
        var _this2 = this;

        var iconsPath,
            _this$state$defaultPa,
            defaultPageSize,
            CUSTOMIZE_ICON_NAME,
            _args = arguments;

        return _regeneratorRuntime.wrap(function _callee$(_context) {
          while (1) {
            switch (_context.prev = _context.next) {
              case 0:
                iconsPath = _args.length > 0 && _args[0] !== undefined ? _args[0] : 'iconfont.css';
                _this$state$defaultPa = this.state.defaultPageSize, defaultPageSize = _this$state$defaultPa === void 0 ? 30 : _this$state$defaultPa;
                CUSTOMIZE_ICON_NAME = this.config.CUSTOMIZE_ICON_NAME;
                _context.next = 5;
                return import("@/assets/icons/".concat(iconsPath)).then(function () {
                  var m1 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
                  var cssObj = m1.default || {};
                  var icons = Object.keys(Object.assign(iconfont, cssObj)).map(function (item) {
                    return item.replace("".concat(CPAAS_ORIGIN_ICON_NAME, "-"), '').replace("".concat(CUSTOMIZE_ICON_NAME, "-"), '');
                  }).filter(function (key) {
                    return key !== CUSTOMIZE_ICON_NAME && key !== CPAAS_ORIGIN_ICON_NAME;
                  });
                  var size = defaultPageSize < icons.length ? defaultPageSize : icons.length;

                  _this2.setState({
                    totalIcons: icons,
                    icons: icons.slice(0, size)
                  });
                }).catch(function () {
                  var icons = Object.keys(iconfont).map(function (item) {
                    return item.replace("".concat(CPAAS_ORIGIN_ICON_NAME, "-"), '').replace("".concat(CUSTOMIZE_ICON_NAME, "-"), '');
                  }).filter(function (key) {
                    return key !== CUSTOMIZE_ICON_NAME && key !== CPAAS_ORIGIN_ICON_NAME;
                  });
                  var size = defaultPageSize < icons.length ? defaultPageSize : icons.length;

                  _this2.setState({
                    totalIcons: icons,
                    icons: icons.slice(0, size)
                  });
                });

              case 5:
              case "end":
                return _context.stop();
            }
          }
        }, _callee, this);
      }));

      function loadAllIconsAsync() {
        return _loadAllIconsAsync.apply(this, arguments);
      }

      return loadAllIconsAsync;
    }()
  }, {
    key: "handlePickerVisible",
    value: function handlePickerVisible(visible) {
      this.setState({
        pickerVisible: visible
      });
    }
  }, {
    key: "selectIcon",
    value: function selectIcon(icon) {
      var _this$props = this.props,
          form = _this$props.form,
          fieldName = _this$props.field;
      var _this$state$totalIcon = this.state.totalIcons,
          totalIcons = _this$state$totalIcon === void 0 ? [] : _this$state$totalIcon;

      if (form && fieldName) {
        form.setFieldsValue(_defineProperty({}, fieldName, icon));
      }

      this.setState({
        selectedIcon: icon,
        pickerVisible: false,
        totalIcons: totalIcons
      });
    }
  }, {
    key: "handleChange",
    value: function handleChange(_ref) {
      var value = _ref.target.value;
      var _this$state = this.state,
          _this$state$totalIcon2 = _this$state.totalIcons,
          totalIcons = _this$state$totalIcon2 === void 0 ? [] : _this$state$totalIcon2,
          defaultPageSize = _this$state.defaultPageSize;
      var size = defaultPageSize < totalIcons.length ? defaultPageSize : totalIcons.length;

      if (value) {
        var filterList = totalIcons.filter(function (icon) {
          return icon.includes(value);
        });
        this.setState({
          icons: filterList,
          selectedIcon: value
        });
      } else {
        this.setState({
          icons: totalIcons.slice(0, size),
          selectedIcon: ''
        });
      }
    }
  }, {
    key: "handleClear",
    value: function handleClear() {
      var _this$props2 = this.props,
          form = _this$props2.form,
          fieldName = _this$props2.field;
      var _this$state2 = this.state,
          _this$state2$totalIco = _this$state2.totalIcons,
          totalIcons = _this$state2$totalIco === void 0 ? [] : _this$state2$totalIco,
          _this$state2$icons = _this$state2.icons,
          icons = _this$state2$icons === void 0 ? [] : _this$state2$icons,
          defaultPageSize = _this$state2.defaultPageSize;
      var size = defaultPageSize < icons.length ? defaultPageSize : icons.length;

      if (form && fieldName) {
        form.setFieldsValue(_defineProperty({}, fieldName, ''));
      }

      this.setState({
        pickerVisible: false,
        selectedIcon: '',
        icons: totalIcons.slice(0, size)
      });
    }
  }, {
    key: "handlePagination",
    value: function handlePagination(page, pageSize) {
      var _this$state$totalIcon3 = this.state.totalIcons,
          totalIcons = _this$state$totalIcon3 === void 0 ? [] : _this$state$totalIcon3;
      var size = pageSize * (page - 1);
      var pagIcons = size + pageSize >= totalIcons.length ? totalIcons.slice(size, totalIcons.length) : totalIcons.slice(size, size + pageSize);
      this.setState({
        icons: pagIcons
      });
    }
  }, {
    key: "render",
    value: function render() {
      var _this3 = this;

      var _this$props3 = this.props,
          _this$props3$isButton = _this$props3.isButton,
          isButton = _this$props3$isButton === void 0 ? false : _this$props3$isButton,
          _this$props3$allowCle = _this$props3.allowClear,
          allowClear = _this$props3$allowCle === void 0 ? false : _this$props3$allowCle;
      var _this$state3 = this.state,
          selectedIcon = _this$state3.selectedIcon,
          pickerVisible = _this$state3.pickerVisible,
          _this$state3$totalIco = _this$state3.totalIcons,
          totalIcons = _this$state3$totalIco === void 0 ? [] : _this$state3$totalIco,
          _this$state3$icons = _this$state3.icons,
          icons = _this$state3$icons === void 0 ? [] : _this$state3$icons,
          defaultPageSize = _this$state3.defaultPageSize;
      var suffix = /*#__PURE__*/React.createElement(React.Fragment, null, allowClear && selectedIcon && /*#__PURE__*/React.createElement(Icon, {
        type: "close",
        className: "icons-picker-clear",
        onClick: this.handleClear.bind(this)
      }), /*#__PURE__*/React.createElement(Icon, {
        type: "scan"
      }));
      return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Popover, {
        visible: pickerVisible,
        onVisibleChange: this.handlePickerVisible.bind(this),
        trigger: "click",
        placement: "bottom",
        content: /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
          className: classNames(_defineProperty({}, styles['icons-picker-wrapper'], true))
        }, icons.map(function (icon) {
          return /*#__PURE__*/React.createElement("div", {
            className: classNames(_defineProperty({}, styles.icons, true)),
            key: icon
          }, /*#__PURE__*/React.createElement(Icons, {
            type: icon,
            size: 18,
            onClick: _this3.selectIcon.bind(_this3, icon)
          }));
        })), /*#__PURE__*/React.createElement(Pagination, {
          simple: true,
          style: {
            display: 'flex',
            justifyContent: 'flex-end',
            marginTop: '10px'
          },
          defaultPageSize: defaultPageSize,
          defaultCurrent: 1,
          total: totalIcons.length,
          onChange: this.handlePagination.bind(this)
        }))
      }, isButton ? /*#__PURE__*/React.createElement(Button, {
        className: styles['icon-picker-button']
      }, selectedIcon ? /*#__PURE__*/React.createElement(Icons, {
        type: selectedIcon,
        size: 18
      }) : /*#__PURE__*/React.createElement(Icon, {
        type: "scan",
        style: {
          fontSize: '18px'
        }
      })) : /*#__PURE__*/React.createElement(Input, {
        clearButton: true,
        className: styles['icon-picker'],
        value: selectedIcon,
        prefix: selectedIcon && /*#__PURE__*/React.createElement(Icons, {
          type: selectedIcon,
          size: 18
        }),
        suffix: suffix,
        onChange: this.handleChange.bind(this)
      })));
    }
  }]);

  return IconsPicker;
}(React.Component), (_applyDecoratedDescriptor(_class.prototype, "loadAllIconsAsync", [_dec], Object.getOwnPropertyDescriptor(_class.prototype, "loadAllIconsAsync"), _class.prototype)), _class));
export { IconsPicker as default };